import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
import vuexPersist from "vuex-persist";

export default new Vuex.Store({
  state: {
    shopcar: [],
    user: "",
  },
  mutations: {
    add(state, i) {
      let flag = false;
      // 一个变量的真或者假 代表 这个商品在购物车中存不存在
      state.shopcar.forEach((item) => {
        if (item._id == i._id) {
          flag = true;
          item.num++;
        }
      });
      //如果 存在就让flag为true num++

      if (flag == false) {
        // i.num = 1;
        //这种普通的新增属性的方法没办法被监测到，不是响应式的 视图不会跟着数据更新
        Vue.set(i, "num", 1);
        //用set方法给i这个对象添加一个新的属性num 初始值是1

        state.shopcar.push(i);
      }
      //如果不存在 就 给一个初始的num值为1，往里push数据
    },
    del(state, id) {
      // state.shopcar.splice(index, 1);
      state.shopcar.forEach((item, index) => {
        if (item._id == id) {
          state.shopcar.splice(index, 1);
        }
      });
      //在这里使用 id找到下标删除这个数据，也可以使用 下标删除
    },
    remove(state, res) {
      state.shopcar = state.shopcar.filter((item) => {
        return res.includes(item) == false;
      });
      //把不删的留下来
      // for (let i = 0; i < state.shopcar.length; i++) {
      //   if (res.includes(state.shopcar[i]) == true) {
      //     state.shopcar.splice(i, 1);
      //     i--;
      //   }
      // }
      //选中删除的另一种方法
    },
    change() {},

    setuser(state, val) {
      state.user = val;
    },
  },
  actions: {},
  modules: {},
  plugins: [
    new vuexPersist({
      storage: window.localStorage,
    }).plugin,
  ],
});
